<template>
	<uni-popup borderRadius="30rpx" backgroundColor="rgba(255, 255, 255, 0)" ref="MembershipRatePop"
		:mask-click="false">
		<view class="popup-box">
      <view class="content-wrapper">

        <uni-collapse 
			class="collapse-box" 
			ref="collapse" 
			v-model="activeItems"
			@change="change"
			accordion
			>
				<uni-collapse-item class="collapse-item" v-for="(item, index) in typeList" :key="index" :name="index">
					<template v-slot:title>
						<view class="title-container">
							<image src="/static/images/NangCahng/MembershipLevel.png" mode=""
								style="width: 50rpx; height: 50rpx;">
							</image>
							<span class="main-title">
								{{ item.name }}
							</span>
						</view>
					</template>
					<view class="content">
						<view class="sub-title" v-for="(interestText, interestIndex) in item.interestList" :key="interestIndex">
							{{ interestText }}
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
      </view>
			<view class="button">
				<button type="default" @tap="closePopup">知道了</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		memberList
	} from '../../../api/member';
	export default {
		mounted() {
			this.$refs.MembershipRatePop.open('center');
			console.log("typeList mounted")
			memberList().then((res) => {
				console.log("typeList mounted----res:" + res)
				//console.log("this.$refs.collapse:"+this.$refs.collapse)
				if (res.code == 200) {
					this.typeList = res.data
					//this.$refs.collapse.typeList = res.data
					//this.props.push(res.data)
					console.log(this.typeList)
				}
			}).catch((err) => {
				console.log(err)
			})
		},

		data() {
			return {
				activeItems: [0],
				typeList: []
			}
		},
		// props: [
		// 	"typeList",
		// ],
		methods: {
			change(e) {
				console.log(e)
			},
			closePopup() {
				// console.log(1)
				this.$emit("close")
				this.$refs.MembershipRatePop.close()
			},
		}
	}
</script>

<style>
	.popup-box {
		padding: 30rpx;
		width: 70vw;
		background-color: white;
		border-radius: 20rpx;
	}
	.content-wrapper {
		overflow: auto;
		max-height: 70vh;
	}

	.title-container {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}

	.main-title {
		font-size: 28rpx;
		font-weight: bold;
		color: rgb(64, 64, 64);
		margin-left: 20rpx;
	}

	.sub-title {
		color: #979797;
		font-size: 26rpx;
		margin-top: 16rpx;
		line-height: 1.5;
	}

	.collapse-item {
		padding: 10rpx;
	}

	.button {
		background-color: transparent;
		padding: 50rpx 0 30rpx 0;
		place-content: center;
		place-items: center;
	}

	.button button {
		background-color: rgb(15, 76, 151);
		color: white;
		border-radius: 60rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}

	.content {
		padding: 10rpx 0 10rpx 70rpx;
	}
</style>